import React, { Component } from 'react';
import { connect } from 'react-redux';
import $http from '../../http';
import DishTab from './components/DishTab';
import DishTop from './components/DishTop';
import { Card } from 'antd-mobile';
import {Toast} from 'antd-mobile';

function mapStateToProps(state) {
    return {
        ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {
        getDishList() {
            Toast.loading('loading...',0);
            $http.get('/api/dish').then((res) => {
                console.log('res', res);
                dispatch({ type: "SET_DISH_LIST", data: res.data });
                Toast.hide();
            })
        },
        selectCate(cate){
            console.log('selectCate cate',cate)
            dispatch({ type: "SELECT_CATE", data: cate })
        }
    };
}

class DishList extends Component {

    componentWillMount() {
        this.props.getDishList();
    }

    render() {
        let { dish_list,dish_cate,selectCate } = this.props;
        return (
            <div>
                <div className="top">
                    <DishTop list={dish_cate} selectCate={selectCate}></DishTop>
                </div>
                <div className="left">
                    <DishTab list={dish_list}></DishTab>
                </div>
                <div className="right">
                    {dish_list.map((tab, i) => {
                        return <div key={i}>
                            <h3 id={i}>{tab.title}</h3>
                            {tab.children.map((v, j) => {
                                return <div key={j}>
                                    <Card full>

                                        <Card.Body>
                                            <div>{v.title}</div>
                                            <div><img src={v.image} alt="" /> </div>
                                            <div>分类：{v.cate}</div>
                                            <div>价格：{v.price}</div>
                                        </Card.Body>

                                    </Card>


                                </div>
                            })}
                        </div>
                    })}
                </div>
            </div>
        );
    }
}

export default connect(
    mapStateToProps, mapDispatchToProps
)(DishList);